<template>
<!-- #ifdef MP-WEIXIN -->
	<view :style="{ height: statusBarHeight }" class="uni-status-bar">
		<slot />
	</view>
		<!-- #endif -->
</template>

<script>
// #ifdef MP-WEIXIN
var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
// #endif
// #ifdef H5
// eslint-disable-next-line
var statusBarHeight =  '0px';
// #endif
export default {
	name: 'UniStatusBar',
	data() {
		return {
			statusBarHeight: statusBarHeight
		};
	},
	created() {
		this.$emit('higthchange',this.statusBarHeight);
	},
	watch:{
		statusBarHeight() {
			this.$emit('higthchange',this.statusBarHeight);
		}
	}
};
</script>

<style lang="scss" scoped>
	.uni-status-bar {
		width: 750rpx;
		height: 20px;
		// height: var(--status-bar-height);
	}
</style>
